import React from 'react'
import './search-group.less'

export default class Search extends React.Component {
  constructor(props) {
    super(props)
    this.displayName = 'Search'
    this.state = {
      focus: false,
      value: ''
    }
  }
  static defaultProps = {
    btnValue: '搜索',
    place: '请输入...'
  }
  place(bool) {
    this.setState({
        focus: bool
    })
  }
  change(e) {
    this.setState({
        value: e.target.value
    })
  }
  clear() {
    this.setState({
        value: ''
    })
    this.props.onSubmit('')
  }
  handleSubmit(e) {
    e.preventDefault()
    var { value } = this.state
    this.props.onSubmit(value)
  }
  render() {
    var { value, focus } = this.state
    var { btnValue } = this.props
    return <div className="tederen-search-group">
      <form onSubmit={this.handleSubmit.bind(this)}>
        <input type="text" className="search-input"
        value={value}
        placeholder={focus ? '' : this.props.place}
        onFocus={this.place.bind(this, true)}
        onBlur={this.place.bind(this, false)}
        onChange={this.change.bind(this)}/>
        <i className="ion-close-round"
        style={focus ? {color: '#999'} : {color: '#fff'}}
        onClick={this.clear.bind(this)}></i>
        <button className="search-btn">{btnValue}</button>
      </form>
    </div>
  }
}




